<!DOCTYPE html>
<html lang="en" ng-app="carmenApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title> Carmen Sandiego </title>
        <meta name="description" content="Carmen Sandiego, el juego">
       
        <!-- JQUERY -->
        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

        <!-- BOOTSTRAP -->
        <link rel="stylesheet"
            href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
        <link rel="stylesheet"
            href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
        <link rel="stylesheet"
        	href="stylesheets/main.css">
        	    
        <script
            src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <!-- ANGULAR  -->
        <script
	       src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js"></script>
        
        <script
	       src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular-animate.js"></script>
        
        <!-- Controllers de Pais/Villano/Lugar -->
        <script src="javascripts/controllers.js"></script>
        
    </head>
    <body>
        <div class = "container" data-ng-controller = "CarmenController" data-ng-init="iniciarJuego()">
        
            <!--Lugares a consultar-->
            <div class = "jumbotron " >
                <div class = "container">
                    <h2>Detective, estos lugares pueden tener pistas utiles: </h2>
                    <div class ="btn-group btn-group-justified">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-ng-repeat = "lugar in caso.lugares" >
                                {{lugar}}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class = "row">
                <hr></hr>
            
            
             <!--Componentes para viajar a otro pais-->
            <div class = "col-sm-4">
                    <div class = "panel-primary">    
                        <h2>
                            <span class="label label-primary"> Usted esta en: </span> 
                            <span class="label label-success" ng-bind="caso.nombrePais"/>
                        </h2>
                        <hr></hr>
                        <h4>
                            <button class="btn btn-lg btn-primary" type="button" ng-click = "viajar()">
                                ¡Viajar!
                            </button>
                        </h4>
                    </div>
                </div>
            
            <!--Lista Conexiones posibles -->
                <div class = "col-sm-4">
                    <div class = "panel-success">
                        <div class = "panel-heading">
                            <div class ="panel-title">
                                <span class = "glyphicon glyphicon-send"></span>
                                <span>Posibles Destinos</span>
                            </div>
                        </div>
                        <div class="input-group" data-ng-repeat = "conexion in caso.posiblesConexiones">
                            <span class="input-group-addon">
                                <input type="radio" ng-click = "paisSeleccionado(conexion)">
                            </span>
                            <div class = "list-group-item" >
                                {{conexion}}
                            </div>
                        </div>
                        </div>
                    </div>
            
            
        <!--Lista Destinos fallidos-->
                <div class = "col-sm-4" >
                     <div class = "panel-success">
                        <div class = "panel-heading">
                            <div class ="panel-title">
                                <span class = "glyphicon glyphicon-remove-circle"></span>
                                <span>Destinos Fallidos</span>
                            </div>
                        </div>
                        <div class = "list-group-item" data-ng-repeat = "destino in caso.destinosFallidos">
                            {{destino}}
                        </div>
                    </div>
                </div>
                        <hr></hr>
            </div>
        <div class = "row">
            <hr></hr>

            <!--Destinos recorridos -->
            <div class = "col-sm-5">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title">Mi ruta</h3>
                    </div>
                    <div class="panel-body">
                        {{caso.paisesRecorridos}}
                    </div>
                </div>  
            </div>

        <!--Ordenes de arresto-->
        <div class = "col-sm-4">
                <div class="panel panel-success" >
                    <div class="panel-heading">
                        <h3 class="panel-title">Orden ya emitida contra: {{sospechoso}}</h3>
                    </div>
                    </div>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation" data-ng-repeat = "villano in villanos">
                            <a role="menuitem" tabindex="-1" href="#">Regular link</a>
                        </li>
                    </ul>
                </div>
                <div class = "col-sm-3" >
                      <button class="btn btn-lg btn-primary" type="button" ng-click = "generarOrden()">
                                ¡Generar Orden! 
                    </button>
                </div>
            </div>
        </div>
    
    
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
        
    </body>
</html>